<template>
  <div>
    <div class="flex-main">
      <div class="flex-body">
        <div class="m-cash">
          <div class="c-top">
            <div class="p-num">
              <span>
                <span class="iconfont">&#xe603;</span>
                <span class="n-petal">花瓣个数</span>
              </span>
              <span class="p-btn" @click="isRuleShow= true">提现规则</span>
            </div>
            <div class="petalNum">
              <p class="c-num">{{total}}</p>
            </div>
          </div>
          <div class="c-select">
            <p>当前花瓣个数: {{total}} </p>
            <p>待提现金额: {{withdraw_money}}</p>
            <p>最低提现金额: {{minWithdraw}}</p>
          </div>
          <div class="m-bankCare" @click="isShow = true">
            <span>选择银行</span>
            <span class="creditCard">{{bandCard}}</span>
          </div>
          <div class="card-num">
            <form class="m-form">
              <div class="m-name">
                <input type="number" class="m-input" name="CardNum" oninput="value=value.replace(/[^\d]/g,'');if(value.length>25)value=value.slice(0,25)"
                  placeholder="银行卡号" v-model="bankCardNum">
              </div>
              <div class="m-name">
                <input type="text" class="m-input" name="OpenBand" placeholder="开户行" v-model="OpenBand">
              </div>
              <div class="m-name">
                <input type="text" class="m-input" name="CardName" placeholder="开户行姓名" v-model="CardName">
              </div>
              <div class="m-name">
                <input type="number" class="m-input" name="CardMoney" placeholder="提现金额" v-model="CardMoney">
                <div class="withdraw_cash">手续费为3%,实际到账<span>{{CardMoney * 0.97}}</span></div>
              </div>
            </form>
          </div>
          <div class="c-submit" @click="withdraw">申请提现</div>
        </div>
        <!-- 选择银行卡 -->
        <mt-popup v-model="isShow" position="bottom">
          <picker-bank-card @pickerChange="pickerChange"></picker-bank-card>
        </mt-popup>
        <!-- 提现规则 -->
        <mt-popup v-model="isRuleShow" position="right" popup-transition="popup-fade">
          <div class='regulation'>
            <div class="m-content ">
              <div class="c-title">提现规则</div>
              <div class="c-text" v-html="WithdrawRule">
                花瓣提现，可选择提现金额，提交申请等待平台审核发放。等待平台审核发放，提现发放工作日每周二周三。手续费3%，最低提现金额为100.
              </div>
            </div>
          </div>
        </mt-popup>
      </div>
      <footer-nav class="flex-bottom"></footer-nav>
    </div>


  </div>
</template>
<script>
  import {
    Toast
  } from 'mint-ui';
  import {
    getWithdrawRule,
    withdraw,
    Withdraw_list,
    getUserData,
  } from "@/api/mine.js";
  export default {
    data() {
      return {
        isShow: false, //选择器的显示与影藏
        isRuleShow: false, //提现规则显示与影藏
        bandCard: '',
        bankCardNum: '', //银行卡号
        OpenBand: '',
        CardName: '',
        CardMoney: '',
        WithdrawRule: '',
        CustomerID: this.$utils.uid,
        minWithdraw: 1, //最低提现金额
        total: 0, //花瓣数量
        withdraw_money: 0, //待提现花瓣数量
      }
    },
    methods: {
      //选择银行卡
      pickerChange(e) {
        this.bandCard = e.backName
      },
      //点击提现
      withdraw() {
        var bandCard = this.bandCard;
        var bankCardNum = this.bankCardNum;
        var OpenBand = this.OpenBand;
        var CardName = this.CardName;
        var CardMoney = this.CardMoney;
        if (!bandCard || !bankCardNum || !OpenBand || !CardName || !CardMoney) {
          Toast({
            message: '请完善信息',
            position: 'middle',
            duration: 3000
          });
          return;
        }
        if (this.withdraw_money > CardMoney) {
          Toast({
            message: '最低提现金额为' + this.withdraw_money,
            position: 'middle',
            duration: 3000
          });
          return;
        }
        if (this.total < CardMoney) {
          Toast({
            message: '花瓣数量不足',
            position: 'middle',
            duration: 3000
          });
          return;
        }
        this.submit_apply()
      },
      //发送提现申请
      submit_apply() {
        var bandCard = this.bandCard;
        var bankCardNum = this.bankCardNum;
        var OpenBand = this.OpenBand;
        var CardName = this.CardName;
        var CardMoney = this.CardMoney;
        withdraw({
          CustomerID: this.CustomerID,
          depositBank: bandCard,
          accNo: bankCardNum,
          money: CardMoney,
          name: CardName,
          openband: OpenBand,
        }).then(res => {
          console.log(res)
        }).catch(error => {
          Toast(error.msg);
        });
      },

      //获取提现规则
      getRule() {
        getWithdrawRule().then(res => {
          this.WithdrawRule = res.list.Rules_content
        }).catch(error => {
          Toast(error.msg);
        });
      },

      //获取最低提现和用户的总花瓣以及待提现花瓣
      getUserPeal(CustomerID) {
        Withdraw_list({
          CustomerID: CustomerID,
        }).then(res => {
          this.minWithdraw = parseFloat(res.minWithdraw);
          this.total = parseFloat(res.total);
          this.withdraw_money = parseFloat(res.money);
        }).catch(error => {
          Toast(error.msg);
        });
      },

      //获取用户的银行卡信息
      getUserCard(CustomerID) {
        getUserData({
          customer_id: CustomerID,
        }).then(res => {
          this.bankCardNum = res.detail.BankAccount;
          this.bandCard = res.detail.BankName;
        }).catch(error => {
          Toast(error.msg);
        });
      }
    },
    mounted() {
      var CustomerID = this.CustomerID;
      this.getRule();
      this.getUserPeal(CustomerID);
      this.getUserCard(CustomerID)
    },
    components: {
      pickerBankCard: () => import('@/components/pickerBankCard'),
    }
  }

</script>
<style lang="less" scoped src="@/less/mine/withdrawal.less">

</style>
